<!--录屏-->
<template>
  <!-- <div class="video"> -->
    <div class="container">
        <section class="item">
          <!-- <span class="type-name">文件名称:</span> -->
          <!-- <input type="text" v-model.trim="fileName" placeholder="文件名称" /> -->
          <div class="ipt">
            <input type="text" v-model.trim="fileName" placeholder="输入文件名称" />
            <span class="bottom"></span>
            <span class="right"></span>
            <span class="top"></span>
            <span class="left"></span>
          </div>

          <!-- <span>.mp4</span> -->
        </section>

        <section class="item">
          <div>
            <span class="type-name">录制时长：</span> <span>{{ timeLong }}s</span>
          </div>
        </section>

        <section class="item">
          <button class="media-btn" @click="clicks" title="点击开始录制">{{ txt }}</button>
        </section>
      </div>
  <!-- </div> -->
</template>

<script setup>
import { reactive, toRefs, watch } from "vue";
import { useRouter } from "vue-router";
// import { useHomeStore } from "@/stores/home";
// const store = useHomeStore()
const router = useRouter();
const data = reactive({
  timeout: 0,
  recordedBlobs: [],
  fileName: "",
  txt: "开始录制",
  status: false,
  stream: null,
  options: {
    audioBitsPerSecond: 128000,
    videoBitsPerSecond: 4500000,
    mimeType: "video/webm",
  },
  startTime: 0,
  timeLong: 0,
  timeLongs: null,
  endTime: 0,
});
const { fileName, timeLong, txt } = toRefs(data);
watch(
  () => data.status,
  (newVal, oldVal) => {
    // console.log('新：'+newVal,'旧：'+oldVal);
    if (newVal) {
      data.txt = "停止录制";
    } else {
      data.txt = "开始录制";
    }
  },
  { deep: true }
);
const handleClose = () => {
  router.push("/");
};
const clicks = () => {
  if (data.status) {
    stopReset();
    data.status = false;
    clearInterval(data.timesLongs);
  } else {
    startScreen();
  }
};
const cauTime = () => {
  data.timeLongs = setInterval(() => {
    data.timeLong = (new Date().getTime() - data.startTime) / 1000;
  }, 200);
};
const stopReset = () => {
  data.stream.getTracks().forEach((track) => track.stop());
  data.recordedBlobs = [];
};
const startScreen = () => {
  //注意,加上 audio: true 之后底部可以拖动的停止就失效了,正在fixing
  navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }).then(
    (stream) => {
      data.status = !data.status;
      console.log("开始录制");
      data.startTime = new Date().getTime();
      cauTime();

      data.stream = stream;
      const mediaRecorder = new MediaRecorder(stream, data.options);
      mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          data.status = false;
          clearInterval(data.timeLongs);
          console.log("结束录制,录制时长:" + data.timeLong + "s");
          data.recordedBlobs.push(event.data);
          download();
          stopReset();
        }
      };
      mediaRecorder.start();
    },
    (error) => console.log(error)
  );
};
const download = () => {
  const blob = new Blob(data.recordedBlobs, { type: "video/mp4" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  document.body.appendChild(a);
  a.style.display = "none";
  a.href = url;
  if (data.fileName) {
    a.download = data.fileName + ".mp4";
  } else {
    a.download = new Date().toLocaleString() + ".mp4";
  }
  a.click();
  window.URL.revokeObjectURL(url);
};

</script>

<style lang="less" scoped>
.video {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: fixed;
}
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/deep/ .el-dialog {
  border-radius: 20px !important;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
/deep/ .el-tabs__item.is-active {
  color: #000 !important;
  font-weight: 600;
}
/deep/ .el-tabs__item:hover {
  color: #000 !important;
}
/deep/ .el-tabs__active-bar {
  background-color: #000 !important;
}
.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
.item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 25px 0;
  font-size: 20px;
  .ipt {
    position: relative;
    input {
      // border-radius: 10px;
      width: 6.5em;
      color: #000;
      font-size: inherit;
      font-family: inherit;
      // background-color: hsl(236, 32%, 26%);
      background-color: #cccccc70;
      padding: 0.35em 0.45em;
      border: 1px solid transparent;
      transition: background-color 0.3s ease-in-out;
    }

    input:focus {
      outline: none;
    }

    input::placeholder {
      // color: hsla(0, 0%, 100%, 0.6);
      font-size: 15px;
      color: #000;
    }

    span {
      position: absolute;
      background-color: #000;
      transition: transform 0.5s ease;
    }

    .bottom,
    .top {
      height: 1px;
      left: 0;
      right: 0;
      transform: scaleX(0);
    }

    .left,
    .right {
      width: 1px;
      top: 0;
      bottom: 0;
      transform: scaleY(0);
    }

    .bottom {
      bottom: 0;
      transform-origin: bottom right;
    }

    input:focus ~ .bottom {
      transform-origin: bottom left;
      transform: scaleX(1);
    }

    .right {
      right: 0;
      transform-origin: top right;
    }

    input:focus ~ .right {
      transform-origin: bottom right;
      transform: scaleY(1);
    }

    .top {
      top: 0;
      transform-origin: top left;
    }

    input:focus ~ .top {
      transform-origin: top right;
      transform: scaleX(1);
    }

    .left {
      left: 0;
      transform-origin: bottom left;
    }

    input:focus ~ .left {
      transform-origin: top left;
      transform: scaleY(1);
    }
  }
}
.item .unit {
  margin-left: 10px;
}
.item input {
  height: 30px;
  padding: 1px;
  padding-left: 5px;
}
.item input[type="number"] {
  width: 80px;
}
.type-name {
  width: 25%;
}
 
.media-btn {
  border-radius: 10px;
  z-index: 1;
  position: relative;
  font-size: 17px;
  font-family: inherit;
  color: white;
  padding: 0.5em 1em;
  outline: none;
  border: none;
  background-color: hsl(236, 32%, 26%);
  overflow: hidden;
  transition: color 0.4s ease-in-out;
}

.media-btn::before {
  content: '';
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #3cefff;
  transform-origin: center;
  transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
  transition: transform 0.45s ease-in-out;
}

.media-btn:hover {
  cursor: pointer;
  color: #161616;
}

.media-btn:hover::before {
  transform: translate3d(-50%, -50%, 0) scale3d(15, 15, 15);
}

.tip {
  background-color: rgb(248, 243, 172);
  display: inline-block;
  padding: 19px;
  font-size: 25px;
  font-weight: 900;
  border-radius: 3px;
  margin-top: 19px;
}
</style>